<template>
  <div class="container">
    <el-row>
      <el-col :span="6">
        <el-button type="success">打印</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">键 </el-col>
      <el-col :span="6"> 值 </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> id </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> PO </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="open_dialogForm('PO')"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> sn </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="open_dialogForm('sn')"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 品牌 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 型号 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 销售型号 </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 监管型号 </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 容量 </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 是否有锁 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="open_dialogForm('isAssociated')"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 品质 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 状态 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 成色 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6" :offset="3">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="open_dialogForm('deviceCondition')"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 年份 </el-col>
      <el-col :span="6"> </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 销毁方式 </el-col>
      <el-col :span="6"> </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 用户名 </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"> 备注 </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6" :offset="3">
        <el-button type="primary" icon="el-icon-edit"></el-button>
        <el-button type="danger" icon="el-icon-delete"></el-button>
      </el-col>
    </el-row>

    <el-dialog
      :title="'修改' + title"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form ref="form" label-width="80px">
        <el-form-item :label="title" v-if="title == 'PO'">
          <el-input v-model="item.PO" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="title" v-if="title == '成色'">
          <el-radio-group v-model="item.deviceCondition">
            <el-radio label="报废">报废</el-radio>
            <el-radio label="七成新">七成新</el-radio>
            <el-radio label="八成新">八成新</el-radio>
            <el-radio label="九成新">九成新</el-radio>
            <el-radio label="九五新">九五新</el-radio>
            <el-radio label="全新">全新</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="title" v-if="title == 'sn'">
          <el-input v-model="item.sn" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item :label="title" v-if="title == '有锁无锁'">
          <el-radio-group v-model="item.isAssociated">
            <el-radio :label="true">有锁</el-radio>
            <el-radio :label="false">无锁</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDevice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   reqGetBrandModelType,
//   reqGetType,
//   reqGetMarks,
//   reqPrintLogin,
//   reqPrintUnLogin,
// } from "../utils/pc_api";
export default {
  name: "pc_detail",
  data() {
    return {
      // 对话框
      title: "",
      // 设备详细信息
      deviceDetail: {},
      // 对话框
      dialogFormVisible: false,
      item: {
        PO: "",
        sn: "",
        // 是否有锁
        isAssociated: null,
        // 成色
        deviceCondition: null,
      },
    };
  },
  created() {
    this.getBrandModelType();
  },
  methods: {
    // 获取 品牌，CPU，内存，显卡
    getBrandModelType() {},

    // 获取 型号
    getType() {},
    // 获取备注
    getMarks() {},
    // 获取详细信息
    getDetail() {},
    // 修改设备
    updateDevice() {},
    // 打开对话框
    open_dialogForm(item) {
      this.title = item;

      if (item == "sn") {
        this.title = "sn";
      }
      if (item == "PO") {
        this.title = "PO";
      }
      if (item == "isAssociated") {
        this.title = "有锁无锁";
      }
      if (item == "deviceCondition") {
        this.title = "成色";
      }
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.el-row {
  height: 50px;
  display: flex;
  align-items: center;
}

.el-row:nth-child(2n + 1) {
  background-color: #f9f9f9;
}
.el-row:nth-child(1) {
  background-color: #fff;
  color: blue;
}
.container {
  width: 900px;
  margin: auto;
  margin-top: 100px;
}
</style>
